<script>
import echarts from 'echarts'
class charoptions {
  // 年度净签
  initChart1 (chartLabel, chartData, sumCharData, dataTimeCreate) {
    let char1 = {
      title: [
        {
          show: true,
          text: '年度签约(亿)',
          top: '15',
          textStyle: {
            color: '#C3E0FF',
            fontSize: 14,
            fontWeight: 'normal'
          }
        },
        {
          show: true,
          text: '中国金茂：' + sumCharData + '亿',
          right: '0',
          top: '15',
          textStyle: {
            color: '#87D1FF',
            fontSize: 16,
            fontWeight: 'normal'
          }
        },
        {
          show: false,
          text: '数据更新于' + dataTimeCreate,
          right: '0',
          bottom: '0',
          textStyle: {
            color: '#B9CADB',
            fontSize: '0.425rem',
            // fontWeight: 'normal'
          }
        }
      ],
      // backgroundColor: '#011c3a',
      xAxis: {
        type: 'category',
        data: chartLabel, // ['北京', '上海', '广州', '南京', '长沙', '重庆'],
        axisLine: {
          lineStyle: {
            color: '#C3E0FF'
          }
        },
        axisLabel: {
          color: '#C3E0FF',
          fontSize: 12
        }
      },
      yAxis: {
        nameTextStyle: {
          color: '#6C86AD',
          fontSize: 14
        },
        axisLine: {
          lineStyle: {
            color: '#0177d4'
          }
        },
        axisLabel: {
          color: '#6C86AD',
          fontSize: 12
        },
        splitLine: {
          // show: false,
          lineStyle: {
            color: '#2f4164',
            type: 'dashed'
          }
        }
        // interval: 500
        // max: 5000
      },
      series: [
        {
          type: 'bar',
          barWidth: 24,
          label: {
            normal: {
              show: true,
              textStyle: {
                color: '#82CEFF'
              },
              position: 'top'
            }
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: '#87D1FF'
                  },
                  {
                    offset: 1,
                    color: '#4FA5FF'
                  }
                ],
                false
              )
            }
          },
          data: chartData
        }
      ]
    }
    return char1
  }
  // 月度净签
  initChart2 (chartLabel, chartData, sumCharData, dataTimeCreate) { 
    var char2 = {
      title: [
        {
          show: true,
          text: '月度签约(亿)',
          top: '15',
          textStyle: {
            color: '#C3E0FF',
            fontSize: 14,
            fontWeight: 'normal'
          }
        },
        {
          show: true,
          text: '中国金茂：' + sumCharData + '亿',
          right: '0',
          top: '15',
          textStyle: {
            color: '#87D1FF',
            fontSize: 16,
            fontWeight: 'normal'
          }
        },
        {
          show: false,
          text: '数据更新于' + dataTimeCreate,
          right: '0',
          bottom: '20',
          textStyle: {
            color: '#B9CADB',
            fontSize: 8,
            // fontWeight: 'normal'
          }
        },
        {
          show: true,
          text: '数据为考核口径，取自明源销售系统，因未包含 一级、股权交易等\n人工调整数据，与对外公布数据存在差异，更新至 '+dataTimeCreate,
          right: '0',
          bottom: '0',
          textStyle: {
           color: '#B9CADB', 
            fontSize: 9,
            padding:0.2,
             fontWeight: 'normal', 
          } 
        }
      ],
      // backgroundColor: '#011c3a',
      xAxis: {
        type: 'category',
        data: chartLabel,
        axisLine: {
          lineStyle: {
            color: '#C3E0FF'
          }
        },
        axisLabel: {
          color: '#C3E0FF',
          fontSize: 12
        }
      },
      yAxis: {
        nameTextStyle: {
          color: '#6C86AD',
          fontSize: 14
        },
        axisLine: {
          lineStyle: {
            color: '#0177d4'
          }
        },
        axisLabel: {
          color: '#6C86AD',
          fontSize: 12
        },
        splitLine: {
          // show: false,
          lineStyle: {
            color: '#2f4164',
            type: 'dashed'
          }
        }
        // interval: 500
        // max: 5000
      },
      series: [
        {
          type: 'bar',
          barWidth: 24,
          label: {
            normal: {
              show: true,
              textStyle: {
                color: '#FFD8A8'
              },
              position: 'top'
            }
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: '#FFE08E'
                  },
                  {
                    offset: 1,
                    color: '#FFB558'
                  }
                ],
                false
              )
            }
          },
          data: chartData
        }
      ]
    }
    return char2
  }
  initChart3 (chartLabel, chartData, sumCharData, dataTimeCreate) {
    let char3 = {
      title: [
        {
          show: true,
          text: '年度回款(亿)',
          top: '15',
          textStyle: {
            color: '#C3E0FF',
            fontSize: 14,
            fontWeight: 'normal'
          }
        },
        {
          show: true,
          text: '中国金茂：' + sumCharData + '亿',
          right: '0',
          top: '15',
          textStyle: {
            color: '#87D1FF',
            fontSize: 16,
            fontWeight: 'normal'
          }
        },
        {
          show: false,
          text: '数据更新于' + dataTimeCreate,
          right: '0',
          bottom: '0',
          textStyle: {
            color: '#B9CADB',
            fontSize: '0.625rem'
            // fontWeight: 'normal'
          }
        }
      ],
      // backgroundColor: '#011c3a',
      xAxis: {
        type: 'category',
        data: chartLabel,
        axisLine: {
          lineStyle: {
            color: '#C3E0FF'
          }
        },
        axisLabel: {
          color: '#C3E0FF',
          fontSize: 12
        }
      },
      yAxis: {
        nameTextStyle: {
          color: '#6C86AD',
          fontSize: 14
        },
        axisLine: {
          lineStyle: {
            color: '#0177d4'
          }
        },
        axisLabel: {
          color: '#6C86AD',
          fontSize: 12
        },
        splitLine: {
          // show: false,
          lineStyle: {
            color: '#2f4164',
            type: 'dashed'
          }
        }
        // interval: 500
        // max: 5000
      },
      series: [
        {
          type: 'bar',
          barWidth: 24,
          label: {
            normal: {
              show: true,
              textStyle: {
                color: '#82CEFF'
              },
              position: 'top'
            }
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: '#87D1FF'
                  },
                  {
                    offset: 1,
                    color: '#4FA5FF'
                  }
                ],
                false
              )
            }
          },
          data: chartData
        }
      ]
    }
    return char3
  }
  initChart4 (chartLabel, chartData, sumCharData, dataTimeCreate) {
    let char4 = {
      title: [
        {
          show: true,
          text: '月度回款(亿)',
          top: '15',
          textStyle: {
            color: '#C3E0FF',
            fontSize: 14,
            fontWeight: 'normal'
          }
        },
        {
          show: true,
          text: '中国金茂：' + sumCharData + '亿',
          right: '0',
          top: '15',
          textStyle: {
            color: '#87D1FF',
            fontSize: 16,
            fontWeight: 'normal'
          }
        },
        {
          show: false,
          text: '数据更新于' + dataTimeCreate,
          right: '0',
          bottom: '20',
          textStyle: {
            color: '#B9CADB',
            fontSize: '0.625rem'
            // fontWeight: 'normal'
          }
        },
        {
          show: true,
          text: '数据为考核口径，取自明源销售系统，因未包含一级、股权交易等\n人工调整数据，与对外公布数据存在差异，更新至 '+dataTimeCreate,
          right: '0',
          bottom: '0',
          textStyle: {
            color: '#B9CADB',
             fontSize: 9,
            padding:0.2,
             fontWeight: 'normal', 
          }
        }
      ],
      // backgroundColor: '#011c3a',
      xAxis: {
        type: 'category',
        data: chartLabel,
        axisLine: {
          lineStyle: {
            color: '#C3E0FF'
          }
        },
        axisLabel: {
          color: '#C3E0FF',
          fontSize: 12
        }
      },
      yAxis: {
        nameTextStyle: {
          color: '#6C86AD',
          fontSize: 14
        },
        axisLine: {
          lineStyle: {
            color: '#0177d4'
          }
        },
        axisLabel: {
          color: '#6C86AD',
          fontSize: 12
        },
        splitLine: {
          // show: false,
          lineStyle: {
            color: '#2f4164',
            type: 'dashed'
          }
        }
        // interval: 500
        // max: 5000
      },
      series: [
        {
          type: 'bar',
          barWidth: 24,
          label: {
            normal: {
              show: true,
              textStyle: {
                color: '#FFD8A8'
              },
              position: 'top'
            }
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: '#FFE08E'
                  },
                  {
                    offset: 1,
                    color: '#FFB558'
                  }
                ],
                false
              )
            }
          },
          data: chartData
        }
      ]
    }
    return char4
  }
  initChart5 (chartLabel, chartData, chartData2, sumCharData, dataTimeCreate) {
    let char5 = {
      // backgroundColor: '#011c3a',
      title: [
        {
          show: true,
          text: '工程与取证可售资源(亿)',
          top: '15',
          textStyle: {
            color: '#C3E0FF',
            fontSize: 14,
            fontWeight: 'normal'
          }
        },
        {
          show: false,
          text: '中国金茂：' + sumCharData.toFixed(2) + '亿',
          top: '15',
          right: '0',
          textStyle: {
            color: '#87D2FF',
            fontSize: 16,
            fontWeight: 'normal'
          }
        },
        {
          show: false,
          text: '数据更新于' + dataTimeCreate,
          bottom: '0',
          right: '0',
          padding: 0,
          textStyle: {
            color: '#B9CADB',
            fontSize: '0.625rem'
            // fontWeight: 'normal'
          }
        }
      ],
      grid: {
        // left: '0%', // 与容器左侧的距离
        right: '3%', // 与容器右侧的距离
        top: '20%', // 与容器顶部的距离
        bottom: '25%' // 与容器底部的距离
      },
      legend: {
        data: ['工程可售货值', '取证可售货值'],
        align: 'left',
        bottom: '7%',
        textStyle: {
          color: '#C3E0FF',
          fontSize: 12
        },
        icon: 'rect ',
        itemWidth: 12,
        itemHeight: 12,
        padding: 0,
        itemGap: 35,
        selectedMode: false // 取消图例上的点击事件
      },
      xAxis: {
        data: chartLabel,
        axisLine: {
          lineStyle: {
            color: '#C3E0FF;'
          }
        },
        axisLabel: {
          color: '#C3E0FF',
          fontSize: 12
        }
      },
      yAxis: {
        nameTextStyle: {
          color: '#fff',
          fontSize: 12
        },
        axisLine: {
          lineStyle: {
            color: '#0177d4'
          }
        },
        axisLabel: {
          color: '#6C86AD',
          fontSize: 12
        },
        splitLine: {
          // show: false,
          lineStyle: {
            color: '#2f4164',
            type: 'dashed'
          }
        }
      },
      series: [
        {
          name: '工程可售货值',
          type: 'bar',
          barWidth: 18, // 柱子宽度
          barGap: 0, // 柱子之间间距

          label: {
            normal: {
              show: true,
              textStyle: {
                color: '#82CEFF',
                fontSize: 8
              },
              position: 'top'
            }
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: '#87D1FF'
                  },
                  {
                    offset: 1,
                    color: '#4FA5FF'
                  }
                ],
                false
              )
            }
          },
          data: chartData
        },
        {
          name: '取证可售货值',
          type: 'bar',
          barWidth: 18,
          label: {
            normal: {
              show: true,
              textStyle: {
                color: '#FFD8A8',
                fontSize: 8
              },
              position: 'top'
            }
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: '#FFE08E'
                  },
                  {
                    offset: 1,
                    color: '#FFB558'
                  }
                ],
                false
              )
            }
          },
          data: chartData2
        }
      ]
    }
    return char5
  }

  initChart6 (chartData, sumCharData, dataTimeCreate) {
    var data = chartData
    //   [
    //     {
    //       name: '金茂上海',
    //       value: 61
    //     },
    //     {
    //       name: '金茂北京',
    //       value: 23.3421
    //     },
    //     {
    //       name: '金茂上海',
    //       value: 61
    //     },
    //     {
    //       name: '金茂广州',
    //       value: 59
    //     },
    //     {
    //       name: '金茂南京',
    //       value: 41
    //     },
    //     {
    //       name: '长沙',
    //       value: 30
    //     },
    //     {
    //       name: '重庆',
    //       value: 14
    //     }
    //   ]

    var startColor = [
      '#89D8FF',
      '#EBC6FF',
      // '#78EFFF',
      '#1CC8B3',
      '#FFDC8D',
      '#FFBA93',
      // '#E0F093',
      '#76C826',
      '#51B0FF',
      '#D394FF'
    ]
    var endColor = [
      '#51B0FF',
      '#D394FF',
      // '#43DBFF',
      '#35E6D1',
      '#FFB654',
      '#FF845A',
      // '#BDDD5A',
      '#9BF544',
      '#51B0FF',
      '#D394FF'
    ]
    var RealData = []
    data.map((item, index) => {
      RealData.push(Object.assign({}, item))
    })
    RealData.map((item, index) => {
      item.itemStyle = {
        normal: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: startColor[index] // 0% 处的颜色
              },
              {
                offset: 1,
                color: endColor[index] // 100% 处的颜色
              }
            ],
            globalCoord: false // 缺省为 false
          }
        }
      }
    })
    return {
      // backgroundColor: '#152d5b',
      title: [
        {
          text: '已推未售资源(亿)',
          top: '15',
          textStyle: {
            color: '#C3E0FF',
            fontSize: 14,
            fontWeight: 'normal'
          },
          left: 'left'
        },
        {
          show: true,
          text: '中国金茂：' + sumCharData + '亿',
          top: '15',
          textStyle: {
            color: '#87D2FF',
            fontSize: 16,
            fontWeight: 'normal'
          },
          right: 'right'
        },
        {
          show: true,
          text: '数据取自经营管理系统，未包含一级项目，更新至' + dataTimeCreate,
          textStyle: {
            color: '#B9CADB',
             fontSize: 9,
            padding:0.2,
             fontWeight: 'normal', 
          },
          right: '0',
          bottom: '2',
          padding: 0
        }
      ],
      grid: {
        // left: '0%', // 与容器左侧的距离
        // right: '0%', // 与容器右侧的距离
        top: '0%', // 与容器顶部的距离
        bottom: '40%' // 与容器底部的距离
      },
      legend: {
        bottom: '10%',
        // left: 10,
        textStyle: {
          color: '#C3E0FF',
          fontSize: 12,
          LinearGradient: 0
        },
        icon: 'rect',
        itemWidth: 12,
        itemHeight: 12,
        itemGap: 10,
        padding: [0, 0, 0, 0],
        data: data,
        selectedMode: false // 取消图例上的点击事件
      },
      series: [
        // 主要展示层的
        {
          type: 'pie',
          radius: ['0', '40%'],
          label: {
            normal: {
              // position: 'inner',
              formatter:(param)=>{ 
                return param.name+' '+param.value +'，'+(((param.value)/sumCharData)*100).toFixed(2) +'%'
              } ,
              textStyle: {
                color: '#fff',
                fontSize: 12
              }
            }
          },
          labelLine: {
            normal: {
              show: true,
              length:5
            },
            emphasis: {
              show: false
            }
          },
          data: RealData,
          itemStyle: {
            normal: {
              borderColor: '#152d5b',
              borderWidth: 3
            }
          }
        }
      ]
    }
  }
}
export default new charoptions()
</script>
